<template>
    <div class="login">
      <el-container>
        <!-- 头部 -->
        <el-header class="header" style="height: 50px;">
          <el-row :gutter="10">
            <el-col :xs="2" :sm="2" :md="3" :lg="3" :xl="3">&nbsp;</el-col>
            <el-col :xs="11" :sm="11" :md="10" :lg="10" :xl="10">
              <img class="logo" src="./../../public/img/logo_Signin.png">
            </el-col>
          </el-row>
        </el-header>
        <!-- 主体 -->
        <el-main class="body">
          <div class="body-content">
            <el-carousel class="el-carousel" :height='carouselHeight' indicator-position="none" @change="change"> 
              <el-carousel-item v-for="item in list" :key="item">
                <img src="./../../public/img/banner2.jpg" style='height: 100%;width: 100%;'>
              </el-carousel-item>
            </el-carousel>
            <!-- 指示灯 -->
            <div class="indicate-position">
              <span v-for="(item, index) in list" :key="item" :class="index === initialIndex ? 'active' : ''">
                
              </span>
            </div>
            <form class="form" autocomplete="off" @submit.prevent="onSubmit" action="https://www.baidu.com">
              <div class="top">
                <button type="button" @click="catMerchant">商户后台</button>
                <button type="button" class="active">服务商后台</button>
              </div>
              <div class="main">
                <el-input class="form-input" placeholder="请输入用户名" type='text' size='small' v-model="userName" clearable></el-input>
                <el-input class="form-input" placeholder="请输入密码" type='password' size='small' v-model="password" clearable></el-input>
                <div class="form-input" style="margin-bottom: 5px;">
                  <el-input placeholder="请输入验证码" v-model="code" size='small' clearable>
                    <template slot="append">1234</template>
                  </el-input>
                </div>
                <p class="text-right">
                  <a class="forgotPsd" href="javascript:;">忘记密码</a>
                </p>
                <el-button type="warning" native-type='submit' size="medium" lang class="login-submit">登录</el-button>
              </div>
            </form>
          </div>
        </el-main>

        <!-- 底部 -->
        <el-footer class="footer" style="height: 200px;">
          <el-row :gutter="10">
            <el-col :xs="1" :sm="1" :md="2" :lg="2" :xl="2">&nbsp;</el-col>
            <el-col :xs="0" :sm="11" :md="10" :lg="10" :xl="10">
              <div class="grid-content bg-purple-light text-center connect">
                <div class="left text-left">
                  <p class="name">商服热线</p>
                  <p>0571-28133794</p>
                  <p>9:00~21:00</p>
                  <p class="ellipsis">浙江省杭州市滨江区江南大道618号602室</p>
                </div>
                <div class="right text-left connect">
                  <p class="name">客服热线</p>
                  <p><a href="javascript:;">点击咨询</a></p>
                  <p>9:00~21:00</p>
                  <p class="ellipsis">商家专用咨询通道，在线客服及时解答</p>
                </div>
              </div>
            </el-col>
            <el-col class="qrcode" :xs="20" :sm="11" :md="10" :lg="10" :xl="10">
              <div class="grid-content bg-purple text-center">
                <div class="left">
                  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538115978370&di=0d266fa0043a448f2c694d471ff86ae2&imgtype=0&src=http%3A%2F%2Fimg.jiaodong.net%2Fpic%2F003%2F004%2F130%2F00300413046_2e324920.gif">
                  <p>Android下载</p>
                </div>
                <div class="right">
                  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538115978370&di=0d266fa0043a448f2c694d471ff86ae2&imgtype=0&src=http%3A%2F%2Fimg.jiaodong.net%2Fpic%2F003%2F004%2F130%2F00300413046_2e324920.gif">
                  <p>IOS下载</p>
                </div>
              </div>
            </el-col>
            <el-col :xs="1" :sm="1" :md="2" :lg="2" :xl="2">&nbsp;</el-col>
          </el-row>
        </el-footer>
      </el-container>
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
export default {
  data: function () {
    return {
      list: 2,
      initialIndex: 3,
      carouselHeight: '100%',
      userName: '',
      code: '',
      password: ''
    };
  },
  mounted: function () {
    let box = document.getElementsByClassName('el-carousel')[0];
    let height = window.getComputedStyle(box).height;
    this.carouselHeight = height;
    localStorage.getItem('token') ? this.$router.replace('index') : '';
  },
  methods: {
    change: function (e) {
      this.initialIndex = e;
    },
    onSubmit: function (e) {
      let that = this;
      http.post(api.login, {username: that.userName, password: that.password, verification_code_key: that.code, verification_code: that.code}, (res) => {
        if (res.code === '10001' && res.status === 'SUCCESS') {
          localStorage.setItem('token', res.data[0].token);
          localStorage.setItem('navList', '');
          localStorage.setItem('leftNav', '');
          localStorage.setItem('cache', '');
          localStorage.setItem('leftNavIndex', '');
          localStorage.setItem('menuActive', '');
          localStorage.setItem('defaultActive', '');
          that.$router.replace('index');
          return false;
        };
        that.$message.error(res.msg);
      }, () => {
        that.$message.error('网络错误，请稍候再试');
      });
      return true;
    },
    catMerchant: function (index) {
      window.location.href = 'http://newpayseller.tiaze.com';
    }
  }
};
</script>

<style lang="stylus" scoped>
.login
  position: relative
  width: 100vw
  height: 100vh
  box-sizing: border-box
  overflow-x: hidden
  .header
    width: 100vw
    background: #000
    color: #fff
    padding-top: 1rem
    box-sizing: border-box
    z-index: 100
    .logo
      height: 30px
  .body
    padding: 50px 0 230px 0;
    width: 100vw
    height: 100vh
    margin-top: -50px
    box-sizing: border-box
    .body-content
      position: relative
      width: 100%
      height: 100%
      .el-carousel
        height: 100%
      .el-carousel__item h3
        color: #475669
        font-size: 18px
        opacity: 0.75
        line-height: 300px
        margin: 0
      .el-carousel__item:nth-child(2n)
        background-color: #99a9bf
      .el-carousel__item:nth-child(2n+1)
        background-color: #d3dce6
      .indicate-position
        position: absolute
        left: 50%
        bottom: 20px
        margin-left: -52.5px
        width: 105px
        height: 15px
        z-index: 10
        text-align: center
        span
          width: 10px
          height: 10px
          background: #fff
          border-radius: 5px
          display: inline-block
          margin-right: 15px
        .active
          background: rgba(0, 0, 0, .5)
      .indicate-position span:last-child
        margin-right: 0
      .form
        position: absolute
        right: 15em
        top: 50%
        padding: 1.5rem
        transform: translate(0, -50%)
        box-sizing: border-box
        width: 300px
        z-index: 9999
        border-radius: 5px
        background: rgba(0, 0, 0, .35)
        .top
          border-bottom: 1px solid #fff
          padding-bottom: 12px
          margin-bottom: 30px
          font-size: 0
          button
            display: inline-block
            width: 50%
            text-align: center
            font-size: 1.6rem
            color: #fff
            line-height: 35px
            background: unset
            border: 0
          .active
            border-radius: 5px
            background: #fff
            color: #004174
        .main
          .form-input
            margin-bottom: 2rem
            height: 3.5rem
          .forgotPsd
            color: #fff
            margin-top: 1rem
          .login-submit
            width: 100%
            margin-top: 2rem
            background: #F75502
            border: 0
      @media screen and (max-width: 680px)
        .form
          right: 10em
      @media screen and (max-width: 500px)
        .form
          right: 1em
      @media screen and (max-width: 375px)
        .form
          right: .5rem
  .footer
    width: 100vw
    margin-top: -230px
    box-sizing: border-box
    padding: 0
    .grid-content
      padding: 40px 0
      box-sizing: border-box
      font-size: 0
      .left, .right
        display: inline-block
        width: 50%
        font-size: 1.2rem
        color: #999
        p
          margin-top: 7px
          a
            color: #00A0FA
            text-decoration: underline
        .name
          margin-bottom: 15px
        img
          width: 10rem
          height: 10rem
    @media screen and (max-width: 770px)
        .connect
          display: none
</style>
